<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id='app' v-cloak>
        <el-container>
            <el-header>
                <h3>大数据应用开发（1+X证书）试题练习</h3>
                <h5>软件技术专业</h5>
            </el-header>
            <el-main>
                <el-tabs type="border-card" @tab-click='nu'>
                    <el-tab-pane label="数据库（中）" >
                        <my-child :count='count' :nux='nux'></my-child>
                    </el-tab-pane>
                    <el-tab-pane label="Java初级（初、中）"><my-child :count='count' :nux='nux'></my-child></el-tab-pane>
                    <el-tab-pane label="Java高级（中）"><my-child :count='count' :nux='nux'></my-child></el-tab-pane>
                    <el-tab-pane label="软件测试（初）"><my-child :count='count' :nux='nux'></my-child></el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </div>
</body>

</html>
<template id="parent">
    <div>
        <div class="testcontainer">
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-radio-group v-model="radio1">
                        <el-radio :label="x" v-for="(item,x) in nux" :key='x' @change="testchange(x)">
                            试卷{{x+1}}
                        </el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>
            <div v-loading="loading" element-loading-text="拼老命加载中" element-loading-spinner="el-icon-loading">
                <el-row v-if="!show" class="rowTitle">
                    <h4>请选择要练习的卷子</h4>
                </el-row>
                <el-row v-if="show" class="rowTitle">
                    <h4>试卷{{num}}</h4>
                </el-row>
                <el-radio  v-model="radio2" label="1" border @change='sh(1)'>全部&nbsp;&nbsp;</el-radio>
                <el-radio  v-model="radio2" label="2" border @change='sh(2)'>单选题</el-radio>
                <el-radio  v-model="radio2" label="3" border @change='sh(3)'>多选题</el-radio>
                <el-radio  v-model="radio2" label="4" border @change='sh(4)'>判断题</el-radio>
                <el-radio  v-model="radio2" label="5" border @change='sh(5)'>填空题</el-radio>
                <div v-show='shoow[0]'>
                    <el-row :gutter="20" class="rowTitle">
                        <el-col :span="16" v-if="show">
                            <div>一、选择题</div>
                        </el-col>
                        <el-col :span="8"></el-col>
                    </el-row>
                    <el-row :gutter="20" v-for='(item,i) of datalist_1' :key='item.quesid'>
                        <el-col :span="16">
                            <div ref='radios' class="radios">
                                <el-row :gutter="10">
                                    <el-col :span="3">
                                        <h5>题号：{{item.sort+1}}</h5>
                                    </el-col>
                                    <el-col :span="18">
                                        <h5 v-html='item.qTitle'></h5>
                                    </el-col>
                                    <el-button type="text" :span="3" style="margin-top: 8px;margin-left: 20px;"
                                        @click="pars(item.quesid)">查看解析</el-button>
                                </el-row>
                                <el-radio-group v-model="radio[i]" @change="choice(item.quesid,i,1)">
                                    <el-row :gutter="20" class="rowstyle"
                                        v-for="(list,index) in item.qDetail.choiceQuestions" :key="index">
                                        <el-col :span="24">
                                            <el-radio :label="list.option" style="white-space:inherit">
                                                {{list.option}}. {{list.content}}
                                            </el-radio>
                                        </el-col>
                                    </el-row>
                                </el-radio-group><br>
                                <span v-show='answer3[item.quesid] != null'>答案：{{answer3[qu]}}</span><br>
                                <span v-show='parsing[item.quesid] != null' v-html='parsing[qu]'></span>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div v-show='shoow[1]'>
                    <el-row :gutter="20" class="rowTitle">
                        <el-col :span="16" v-if="show">
                            <div>二、多选题</div>
                        </el-col>
                        <el-col :span="8">
                            <div></div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" v-for='(item,i) in datalist_2' :key='item.quesid'>
                        <el-col :span="16">
                            <div>
                                <el-row :gutter="10">
                                    <el-col :span="3">
                                        <h5>题号：{{item.sort+1}}</h5>
                                    </el-col>
                                    <el-col :span="18">
                                        <h5 v-html='item.qTitle'></h5>
                                    </el-col>
                                    <el-button type="text" :span="3" style="margin-top: 8px;margin-left: 20px;"
                                        @click="pars(item.quesid)">查看解析</el-button>
                                </el-row>
                                <div ref='checks' :class="{checkss:flag[item.quesid]}">
                                    <el-row :gutter="20" class="rowstyle" :style="{'background-color':color}"
                                        v-for="(list,index) in item.qDetail.choiceQuestions">
                                        <el-col :span="24">
                                            <el-checkbox :label="list.option" :key="index" v-model="list.checked"
                                                @change="checkchoice(item.quesid,list.option,list.checked,index)"
                                                style="white-space:inherit">
                                                {{list.option}}.{{list.content}}
                                            </el-checkbox>
                                        </el-col>
                                    </el-row>
                                </div>
                                <span v-show='answer3[item.quesid] != null'>答案：{{answer3[qu]}}</span><br>
                                <span v-show='parsing[item.quesid] != null' v-html='parsing[qu]'></span>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div v-show='shoow[2]'>
                    <el-row :gutter="20" class="rowTitle">
                        <el-col :span="16" v-if="show">
                            <div>三、判断题</div>
                        </el-col>
                        <el-col :span="8"></el-col>
                    </el-row>
                    <el-row :gutter="20" v-for='(item,i) of datalist_3' :key='item.quesid'>
                        <el-col :span="16">
                            <div ref='judgmens' class="judgmens">
                                <el-row :gutter="10">
                                    <el-col :span="3">
                                        <h5>题号：{{item.sort+1}}</h5>
                                    </el-col>
                                    <el-col :span="18">
                                        <h5 v-html='item.qTitle'></h5>
                                    </el-col>
                                    <el-button type="text" :span="3" style="margin-top: 8px;margin-left: 20px;"
                                        @click="pars(item.quesid)">查看解析</el-button>
                                </el-row>
                                <el-radio-group v-model="judgmen[i]" @change="choice(item.quesid,i,2)">
                                    <el-row :gutter="20" class="rowstyle"
                                        v-for="(list,index) in item.qDetail.choiceQuestions" :key="index">
                                        <el-col :span="24">
                                            <el-radio :label="list.option" style="white-space:inherit">
                                                {{list.option}}. {{list.content}}
                                            </el-radio>
                                        </el-col>
                                    </el-row>
                                </el-radio-group><br>
                                <span v-show='answer3[item.quesid] != null'>答案：{{answer3[qu]}}</span><br>
                                <span v-show='parsing[item.quesid] != null' v-html='parsing[qu]'></span>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div v-show='shoow[3]'>
                    <el-row :gutter="20" class="rowTitle">
                        <el-col :span="16" v-if="show">
                            <div>四、填空题</div>
                        </el-col>
                        <el-col :span="8">
                            <div></div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" v-for='(item,i) in datalist_4' :key='item.quesid'>
                        <el-col :span="16">
                            <div>
                                <el-row :gutter="5">
                                    <el-col :span="3">
                                        <h5>题号：{{item.sort+1}}</h5>
                                    </el-col>
                                    <el-col :span="18">
                                        <h5 v-html='item.qTitle' style="white-space:inherit"></h5>
                                    </el-col>
                                    <el-button type="text" :span="3" style="margin-top: 8px;margin-left: 20px;"
                                        @click="pars(item.quesid)">查看解析</el-button>
                                </el-row>
                                <div>
                                    <el-row :gutter="20" class="rowstyle" :style="{'background-color':color}"
                                        v-for="(list,index) in item.qDetail.choiceQuestions">
                                        <el-col :span="24">
                                            <input placeholder="请输入内容"></input>
                                        </el-col>
                                    </el-row>
                                </div>
                                <span v-show='answer3[item.quesid] != null'>答案：{{answer3[qu]}}</span><br>
                                <span v-show='parsing[item.quesid] != null' v-html='parsing[qu]'></span>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    new Vue({
        el: '#app',
        data: {
            count:0,
            nux:10
        },
        mounted() {
            this.getData()
        },

        methods: {
            getData() {

            },
            nu(tab, event){
                if(event.target.getAttribute('id') === 'tab-0'){
                    this.count = 0;
                    this.nux = 10;
                }else if(event.target.getAttribute('id') === 'tab-1'){
                    this.count = 1;
                    this.nux = 11;
                }else if(event.target.getAttribute('id') === 'tab-2'){
                    this.count = 2;
                    this.nux = 10;
                }else if(event.target.getAttribute('id') === 'tab-3'){
                    this.count = 3;
                    this.nux = 11;
                }
                // console.log(event.target.getAttribute('id'));
            }
            

        },
        components: {
            "my-child": {
                template: '#parent',
                props: ['count','nux'],
                data() {
                    return {
                        datalist_1: [],
                        datalist_2: [],
                        datalist_3: [],
                        datalist_4: [],
                        answerlist: [],
                        answer: '',
                        answer2: [],
                        radio: [],
                        radio1: '',
                        qid: '',
                        answer: [],
                        color: '',
                        show: false,
                        loading: false,
                        num: 0,
                        ds: {},
                        flag: {},
                        input: {},
                        parsing: {},
                        answer3: {},
                        qu: '',
                        em: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10','11'],
                        dirname:['Database','JavaPrimary','JavaAdvanced','Testing'],
                        judgmen:[],
                        radio2:'1',
                        shoow:[true,true,true,true]
                    }
                },
                methods: {
                    testchange(x) {
                        this.datalist_1 = []
                        this.datalist_2 = []
                        this.datalist_3 = []
                        this.datalist_4 = []
                        this.radio = [];
                        this.judgmen = [];
                        this.show = true;
                        this.loading = true;
                        this.num = x + 1;
                        axios.get("http://1andx.dreaman.net:21503/"+ this.dirname[this.count] +"/exam" + this.em[x]+".json").then(res => {
                            this.datalist_1 = res.data.datalist.filter(item => item.qTypeid == 1);
                        }),
                            axios.get("http://1andx.dreaman.net:21503/"+ this.dirname[this.count] +"/exam" + this.em[x]+".json").then(res => {
                                this.datalist_2 = res.data.datalist.filter(item => item.qTypeid == 2);
                                this.datalist_2.map(item => {
                                    this.ds[item.quesid] = 0;
                                    this.flag[item.quesid] = false;
                                })
                            }),
                            axios.get("http://1andx.dreaman.net:21503/"+ this.dirname[this.count] +"/exam" + this.em[x]+".json").then(res => {
                                this.datalist_3 = res.data.datalist.filter(item => item.qTypeid == 3);
                            }),
                            axios.get("http://1andx.dreaman.net:21503/"+ this.dirname[this.count] +"/exam" + this.em[x]+".json").then(res => {
                                this.datalist_4 = res.data.datalist.filter(item => item.qTypeid == 4);
                                this.datalist_4.map(item => {
                                    item.answer = {}
                                })
                            }),
                            axios.get("http://1andx.dreaman.net:21503/"+ this.dirname[this.count] +"/exam" + this.em[x] + "_answer"+".json").then(res => {
                                this.answerlist = res.data.exam_answer;
                                this.answerlist.map(item => {
                                    this.parsing[item.question_id] = null;
                                    this.answer3[item.question_id] = null;
                                });
                                this.loading = false
                            })
                    },
                    choice(id, i,cunt) {
                        this.answer = this.answerlist.filter(item => item.question_id == id)[0].correct_answer.choiceQuestions[0].option
                        if(cunt === 1){
                            this.$refs.radios[i].style.setProperty('--bcolor', 'red');
                            if (this.answer === this.radio[i]) {
                                this.$refs.radios[i].style.setProperty('--bcolor', 'green'); 
                            }
                        }else if(cunt === 2){
                            this.$refs.judgmens[i].style.setProperty('--bcolor', 'red');
                            if(this.answer === this.judgmen[i]){
                                this.$refs.judgmens[i].style.setProperty('--bcolor', 'green'); 
                            }
                        }
                    },
                    checkchoice(id, option, checked, i) {
                        this.answer2 = this.answerlist.filter(item => item.question_id == id)[0].correct_answer.choiceQuestions
                        var count = this.ds[id];
                        if (checked === true) {
                            this.answer2.map(item => {
                                if (item.option == option) {
                                    return this.ds[id] += 1;
                                }
                            })
                            if (count === this.ds[id]) {
                                this.ds[id] -= 1;
                            }
                        } else {
                            this.answer2.map(item => {
                                if (item.option === option) {
                                    return this.ds[id] -= 1;
                                }
                            })
                            if (count === this.ds[id]) {
                                this.ds[id] += 1;
                            }
                        }
                        if (this.ds[id] === this.answer2.length) {
                            this.flag[id] = true;
                        } else {
                            this.flag[id] = false;
                        }
                    },
                    pars(id) {
                        this.answerlist.map(item => {
                            this.parsing[item.question_id] = null;
                            this.answer3[item.question_id] = null;
                        });
                        let str = this.answerlist.filter(item => item.question_id == id)[0].answer_analysis;
                        let str1 = "";
                        this.answerlist.filter(item => item.question_id == id)[0].correct_answer.choiceQuestions.map(item => {
                            if (item.option >= 'A' && item.option <= 'Z') {
                                str1 += item.option;
                            } else {
                                str1 += item.content + " ";
                            }
                        })
                        if (str === "" || str === null) {
                            this.parsing[id] = "无";
                        } else {
                            this.parsing[id] = str;
                        }
                        this.answer3[id] = str1;
                        this.qu = id;
                    },
                    sh(c){
                        if(c === 1){
                            for(var i = 0; i < this.shoow.length; i++){
                                //this.shoow[i] = true;
                                this.$set(this.shoow,i,true) // 调用set方法来更新数据，会重新渲染视图
                            }
                        }else{
                            for(var i = 0; i < this.shoow.length; i++){
                                this.$set(this.shoow,i,false);
                            }
                            this.$set(this.shoow,c-2,true);
                        }
                        //this.$forceUpdate(); // 强制刷新
                        
                    }
                }
            }
        }
    })
</script>
<style lang="scss">
    #app {
        /* position: relative; */
        width: 1200px;
        margin: auto;
        /* 实现居中 */
        /* padding:5px; */
    }
    .testcontainer {
        margin: auto;
        padding-left: 20px;
    }

    .el-header {
        background-color: #d7e4f5;
        color: rgb(8, 5, 53);
        text-align: center;
        height: 100px !important;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
    }

    .radios {
        --bcolor: red;

    }
    .judgmens{
        --bcolor: red;
    }

    .checkss {
        --gcolor: green;
    }

    .el-checkbox__input.is-checked+.el-checkbox__label {
        background-color: var(--gcolor);
    }

    .el-radio__input.is-checked+.el-radio__label {
        background-color: var(--bcolor);
    }
    .rowstyle {
        padding-top: 0px;
        padding-left: 90px;
    }

    .rowTitle {
        padding-top: 20px
    }
    input {
        border: 1px solid #ccc;
        padding: 7px 0px;
        border-radius: 3px;
        padding-left: 5px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        width: 60%;
        height: 30px;
    }

    input:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
    }
</style>